import ImgBox from "../../components/Common/ImgBox.vue";
import StatisticalChart from "../../components/National/StatisticalChart";
import BadgeLeft from "../../components/National/BadgeLeft";
import $ from 'jquery'

import { baseURL } from '../../utils/ipConfig'
var echarts2 = require("echarts/lib/echarts");
require("echarts/lib/chart/map");
require("echarts/map/js/china");

export default {
    name: "National",
    components: {
        ImgBox,
        StatisticalChart,
        BadgeLeft,
    },
    data() {
        return {
            reports: {},
            excellents: {},
            differences: {},
            nbiots: {},
            mapName: "",
            cityMap: {
                贵阳市: "520100",
                六盘水市: "520200",
                遵义市: "520300",
                安顺市: "520400",
                铜仁市: "522200",
                毕节市: "522400",
                黔西南布依族苗族自治州: "522300",
                黔东南苗族侗族自治州: "522600",
                黔南布依族苗族自治州: "522700",
            },
            situationtitle: "全网",
            activeName: "whole",
            areaCode: "",//地区编号
            touchTest: false,
            foot: "",
            startTime: "",
            endTime: "",
            nameData: [],
            sendData: []
        };
    },
    beforeMount() {
        // this.item();
    },
    mounted() {
        this.item();
    },
    methods: {
        item() {
            let _this = this;
            let params = new URLSearchParams()
            params.append("startTime", "2021110110")
            _this.$ajax
                .post(`${baseURL.ip1}/pc/getBusinessStatisticsData_hour`, params)
                .then(function (res) {
                    //请求成功
                    let resData = res.data;
                    if (resData.code == 200) {
                        let hours = [];
                        resData.data.forEach((item) => {
                            // 日期
                            hours.push(item.hour);
                        });
                        _this.endTime = hours[hours.length - 1];
                        _this.sendDataList();
                        _this.getDataList();
                    }
                })
                .catch(function (error) {
                    //请求失败
                    console.log(error);
                });
        },
        // 进入页面表格加载
        getDataList() {
            let _this = this;
            // let params = new URLSearchParams()
            // params.append('cityCode', _this.areaCode)
            // params.append("startTime", "2021110110")
            let param = new URLSearchParams()
            param.append('endTime', _this.endTime)
            param.append('startTime', _this.endTime)
            _this.$ajax
                .post(`${baseURL.ip1}/pc/getAllBusinessAnalysisData`, param)
                .then(function (res) {
                    //请求成功
                    let resData = res.data;
                    if (resData.code == 200) {
                        for (var i = 0; i < resData.data.length; i++) {
                            if (resData.data[i].dataType == "全国") {
                                // _this.reports = resData.data[i].data;
                                if (resData.data[i].data !== null) {
                                    _this.reports = resData.data[i].data;
                                } else {
                                    _this.reports = {
                                        businesscount: 0,
                                        usercount: 0,
                                        active_user_nums: 0,
                                        sum_throughputcount: 0,
                                        upward_flowcount: 0,
                                        downward_flowcount: 0,
                                    }
                                }
                            }
                            else if (resData.data[i].dataType == "4G") {
                                if (resData.data[i].data !== null) {
                                    _this.excellents = resData.data[i].data;
                                } else {
                                    _this.excellents = {
                                        businesscount: 0,
                                        usercount: 0,
                                        active_user_nums: 0,
                                        sum_throughputcount: 0,
                                        upward_flowcount: 0,
                                        downward_flowcount: 0,
                                    }
                                }

                            } else if (resData.data[i].dataType == "2G") {
                                if (resData.data[i].data !== null) {
                                    _this.differences = resData.data[i].data;
                                } else {
                                    _this.differences = {
                                        businesscount: 0,
                                        usercount: 0,
                                        active_user_nums: 0,
                                        sum_throughputcount: 0,
                                        upward_flowcount: 0,
                                        downward_flowcount: 0,
                                    }
                                }

                            } else {
                                if (resData.data[i].data !== null) {

                                    _this.nbiots = resData.data[i].data;
                                } else {
                                    _this.nbiots = {
                                        businesscount: 0,
                                        usercount: 0,
                                        active_user_nums: 0,
                                        sum_throughputcount: 0,
                                        upward_flowcount: 0,
                                        downward_flowcount: 0,
                                    }
                                }
                            }
                        }
                    }
                })
                .catch(function (error) {
                    //请求失败
                    console.log(error);
                });
            // _this.$ajax
            //     .post(`${baseURL.ip1}/pc/getBusinessStatisticsData_hour`,params)
            //     .then(function (res) {
            //         //请求成功
            //         let resData = res.data;
            //         if (resData.code == 200) {
            //             let hours = [];
            //             resData.data.forEach((item) => {
            //                 // 日期
            //                 hours.push(item.hour);
            //             });
            //             _this.foot = hours[hours.length - 1];
            //             let param = new URLSearchParams()
            //             param.append('endTime', _this.foot)
            //             param.append('startTime', _this.foot)
            //             _this.$ajax
            //                 .post(`${baseURL.ip1}/pc/getAllBusinessAnalysisData`, param)
            //                 .then(function (res) {
            //                     //请求成功
            //                     let resData = res.data;
            //                     if (resData.code == 200) {
            //                         for (var i = 0; i < resData.data.length; i++) {
            //                             if (resData.data[i].dataType == "全国") {
            //                                 _this.reports = resData.data[i].data;
            //                             }
            //                             else if (resData.data[i].dataType == "4G") {
            //                                 if (resData.data[i].data !== null) {
            //                                     _this.excellents = resData.data[i].data;
            //                                 }else {
            //                                    _this.excellents= {
            //                                     businesscount:0,
            //                                     usercount:0,
            //                                     active_user_nums:0,
            //                                     sum_throughputcount:0,
            //                                     upward_flowcount:0,
            //                                     downward_flowcount:0,
            //                                    }
            //                                 }

            //                             } else if (resData.data[i].dataType == "2G") {
            //                                 if (resData.data[i].data !== null) {
            //                                     _this.differences = resData.data[i].data;
            //                                 }else {
            //                                     _this.differences = {
            //                                      businesscount:0,
            //                                      usercount:0,
            //                                      active_user_nums:0,
            //                                      sum_throughputcount:0,
            //                                      upward_flowcount:0,
            //                                      downward_flowcount:0,
            //                                     }
            //                                  }

            //                             } else {
            //                                 if (resData.data[i].data !== null) {

            //                                     _this.nbiots = resData.data[i].data;
            //                                 }else {
            //                                     _this.nbiots = {
            //                                      businesscount:0,
            //                                      usercount:0,
            //                                      active_user_nums:0,
            //                                      sum_throughputcount:0,
            //                                      upward_flowcount:0,
            //                                      downward_flowcount:0,
            //                                     }
            //                                  }
            //                             }
            //                         }
            //                     }
            //                 })
            //                 .catch(function (error) {
            //                     //请求失败
            //                     console.log(error);
            //                 });
            //         }
            //     })
            //     .catch(function (error) {
            //         //请求失败
            //         console.log(error);
            //     });
        },
        // 返回全省视图
        // backMap() {
        //     this.mapChart();
        // },

        // 活跃用户数切换
        sendDataList() {
            let _this = this;
            if (_this.situationtitle == "全网") {
                let params = new URLSearchParams()
                params.append('cityCode', _this.areaCode)
                params.append('endTime', _this.endTime)
                params.append('startTime', _this.endTime)
                _this.$ajax
                    .post(`${baseURL.ip1}/pc/getBusinessStatisticsData_city`, params)
                    .then(function (res) {
                        //请求成功
                        let resData = res.data;
                        if (resData.code == 200 || resData.code == 0) {
                            _this.nameData = [];
                            _this.sendData = [];
                            resData.data.forEach((item) => {
                                // 地区名
                                _this.nameData.push(item.city_name);
                                // 用户数
                                _this.sendData.push(item.active_user_nums);
                            });
                            // 活跃用户数
                            if (_this.areaCode == "") {
                                _this.showProvince("guizhou", "贵州省", _this.sendData, _this.nameData);
                            } else {
                                _this.showCitys("guizhou", _this.mapName, _this.sendData, _this.nameData);
                            }
                        } else {
                            _this.sendData = [];
                            if (_this.areaCode == "") {
                                _this.showProvince("guizhou", "贵州省", _this.sendData, _this.nameData);
                            } else {
                                _this.showCitys("guizhou", _this.mapName, _this.sendData, _this.nameData);
                            }
                        }
                    })
                    .catch(function (error) {
                        //请求失败
                        console.log(error);
                    });
            } else {
                let params = new URLSearchParams()
                params.append('dataType', _this.situationtitle)
                params.append('cityCode', _this.areaCode)
                params.append('endTime', _this.endTime)
                params.append('startTime', _this.endTime)
                _this.$ajax
                    .post(`${baseURL.ip1}/pc/getBusinessStatisticsData_city`, params)
                    .then(function (res) {
                        //请求成功
                        let resData = res.data;
                        if (resData.code == 200) {
                            _this.nameData = [];
                            _this.sendData = [];
                            resData.data.forEach((item) => {
                                // 地区名
                                _this.nameData.push(item.city_name);
                                // 用户数
                                _this.sendData.push(item.active_user_nums);
                            });
                            // 活跃用户数
                            if (_this.areaCode == "") {
                                _this.showProvince("guizhou", "贵州省", _this.sendData, _this.nameData);
                            } else {
                                _this.showCitys("guizhou", _this.mapName, _this.sendData, _this.nameData);
                            }
                        } else {
                            _this.sendData = [];
                            if (_this.areaCode == "") {
                                _this.showProvince("guizhou", "贵州省", _this.sendData, _this.nameData);
                            } else {
                                _this.showCitys("guizhou", _this.mapName, _this.sendData, _this.nameData);
                            }

                        }
                    })
                    .catch(function (error) {
                        //请求失败
                        console.log(error);
                    });
            }
        },
        // 地图显示
        initEcharts(map, data) {
            let myChart = echarts2.init(document.getElementById("national_map"));
            window.addEventListener("resize", () => {
                myChart.resize();
            });
            myChart.setOption({
                roam: true,
                visualMap: {
                    type: "piecewise",
                    right: 5,
                    bottom: 15,
                    min: 0, // 最小值
                    max: 10000000, // 最大值
                    splitList: [
                        {
                            gte: 100,
                            color: "#ADCAFF",
                            label: "100万以上",
                        },
                        {
                            gte: 80,
                            lte: 100,
                            color: "#80ADFF",
                            label: "80万~100万",
                        },
                        {
                            gte: 50,
                            lte: 80,
                            color: "#2474FF",
                            label: "50万~80万",
                        },
                        {
                            gte: 30,
                            lte: 50,
                            color: "#0644B1",
                            label: "30万~50万",
                        },
                        {
                            lte: 30,
                            color: "#001856",
                            label: "30万以下",
                        },
                    ],
                },
                tooltip: {
                    show: true,
                    trigger: "item",
                    formatter: "{b}-活跃用户数：{c}",
                },
                geo: {
                    map: map,
                    scaleLimit: {
                        min: 1.2,
                        max: 4
                    },
                    zoom: 1.2,
                    //图形上的文本标签，可用于说明图形的一些数据信息
                    label: {

                        normal: {
                            show: true,
                            fontSize: "15",
                            color: "#E5E5E5",
                            fontWeight: 500,
                        },
                    },
                    //地图区域的多边形 图形样式，有 normal 和 emphasis 两个状态
                    itemStyle: {
                        //normal 是图形在默认状态下的样式；
                        normal: {
                            borderWidth: 2, //设置外层边框
                            borderColor: '#0B79A6',
                            shadowColor: "#0B79A6"
                        },
                        //emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                        emphasis: {
                            areaColor: "#82d6fad3",
                            shadowOffsetX: 5,
                            shadowOffsetY: 5,
                            shadowBlur: 30,
                            borderWidth: 2,
                            shadowColor: "#0B79A6"
                        }
                    }
                },
                series: [
                    {
                        type: "map",
                        mapType: map,
                        geoIndex: 0,
                        data: data,
                        itemStyle: {
                            normal: {
                                // areaColor: '#000',
                                // borderColor: '#a18a3a',
                                // borderWidth: 10
                            },
                            emphasis: {
                                show: false,
                                areaColor: null
                            }
                        },
                    }
                ]
            }, true);

            myChart.on("click", param => {
                if (param.name in this.cityMap) {
                    // 处理市模块
                    let names = param.name;
                    this.mapName = param.name;
                    if (names == "贵阳市") {
                        this.areaCode = "0851";
                    } else if (names == "遵义市") {
                        this.areaCode = "0852";
                    } else if (names == "安顺市") {
                        this.areaCode = "0853";
                    } else if (names == "黔南布依族苗族自治州") {
                        this.areaCode = "0854";
                    } else if (names == "黔东南苗族侗族自治州") {
                        this.areaCode = "0855";
                    } else if (names == "铜仁市") {
                        this.areaCode = "0856";
                    } else if (names == "毕节市") {
                        this.areaCode = "0857";
                    } else if (names == "六盘水市") {
                        this.areaCode = "0858";
                    } else if (names == "黔西南布依族苗族自治州") {
                        this.areaCode = "0859";
                    }
                    this.switching();
                    // for (let key in this.cityMap) {
                    //     if (names == key) {
                    //         this.showCitys(this.cityMap[key], key);
                    //         break;
                    //     }
                    // }
                }
                //     else if (param.name in countyMap) {
                //     let names = param.name;
                //         for (let key in countyMap) {
                //         if (names == key) {
                //             showCountys(countyMap[key], key);
                //             break;
                //         }
                //     }
                // }
            });
        },
        //展示对应的省 
        showProvince(eName, param, date, name) {
            this.mapName = param;
            for (let i = 0; i < name.length; i++) {
                if (name[i] == "贵阳") {
                    name[i] = "贵阳市";
                }
                else if (name[i] == "遵义") {
                    name[i] = "遵义市";
                }
                else if (name[i] == "铜仁") {
                    name[i] = "铜仁市";
                }
                else if (name[i] == "安顺") {
                    name[i] = "安顺市";
                }
                else if (name[i] == "六盘水") {
                    name[i] = "六盘水市";
                }
                else if (name[i] == "毕节") {
                    name[i] = "毕节市";
                }
                else if (name[i] == "黔西南") {
                    name[i] = "黔西南布依族苗族自治州";
                }
                else if (name[i] == "黔东南") {
                    name[i] = "黔东南苗族侗族自治州";
                }
                else if (name[i] == "黔南") {
                    name[i] = "黔南布依族苗族自治州";
                }
            }
            let size = name.length;
            let datas = [];
            for (let i = 0; i < size; i++) {
                let a = {};
                a.name = name[i];
                a.value = date[i];
                datas.push(a);
            }
            $.getJSON(`map/province/${eName}.json`, data => {
                this.$echarts.registerMap(param, data);
                // if (this.activeName == "first") {
                //     this.initEcharts("main", param);
                // } else {
                //     this.initEcharts("quality", param);
                // }
                this.initEcharts(param, datas);
            })
        },
        //展示对应市
        showCitys(cName, param, date, name) {
            this.mapName = param;
            for (let i = 0; i < name.length; i++) {
                if (name[i] == "贵阳") {
                    name[i] = "贵阳市";
                }
                else if (name[i] == "遵义") {
                    name[i] = "遵义市";
                }
                else if (name[i] == "铜仁") {
                    name[i] = "铜仁市";
                }
                else if (name[i] == "安顺") {
                    name[i] = "安顺市";
                }
                else if (name[i] == "六盘水") {
                    name[i] = "六盘水市";
                }
                else if (name[i] == "毕节") {
                    name[i] = "毕节市";
                }
                else if (name[i] == "黔西南") {
                    name[i] = "黔西南布依族苗族自治州";
                }
                else if (name[i] == "黔东南") {
                    name[i] = "黔东南苗族侗族自治州";
                }
                else if (name[i] == "黔南") {
                    name[i] = "黔南布依族苗族自治州";
                }
            }
            let size = name.length;
            let datas = [];
            for (let i = 0; i < size; i++) {
                let a = {};
                a.name = name[i];
                a.value = date[i];
                datas.push(a);
            }
            this.mapName = param;
            // $.getJSON(`/map/city/${cName}.json`, data => {
            //     this.$echarts.registerMap(param, data);
            //     // this.initEcharts( param, datas);
            // })
        },
        // 点击地图切换数据
        switching() {
            let _this = this;
            _this.$refs.transmit.areaCode = _this.areaCode;
            _this.$refs.region.areaCode = _this.areaCode;
            _this.touchTest = !_this.touchTest;
            let params = new URLSearchParams()
            params.append('cityCode', _this.areaCode)
            params.append('endTime', _this.endTime)
            params.append('startTime', _this.endTime)
            // 分类数据
            _this.$ajax
                .post(`${baseURL.ip1}/pc/getAllBusinessAnalysisData`, params)
                .then(function (res) {
                    //请求成功
                    let resData = res.data;
                    if (resData.code == 200) {
                        for (var i = 0; i < resData.data.length; i++) {
                            if (resData.data[i].dataType == "全国") {
                                _this.reports = resData.data[i].data;
                            }
                            else if (resData.data[i].dataType == "4G") {
                                if (resData.data[i].data !== null) {
                                    _this.excellents = resData.data[i].data;
                                } else {
                                    _this.excellents = {
                                        businesscount: 0,
                                        usercount: 0,
                                        active_user_nums: 0,
                                        sum_throughputcount: 0,
                                        upward_flowcount: 0,
                                        downward_flowcount: 0,
                                    }
                                }

                            } else if (resData.data[i].dataType == "2G") {
                                if (resData.data[i].data !== null) {
                                    _this.differences = resData.data[i].data;
                                } else {
                                    _this.differences = {
                                        businesscount: 0,
                                        usercount: 0,
                                        active_user_nums: 0,
                                        sum_throughputcount: 0,
                                        upward_flowcount: 0,
                                        downward_flowcount: 0,
                                    }
                                }

                            } else {
                                if (resData.data[i].data !== null) {

                                    _this.nbiots = resData.data[i].data;
                                } else {
                                    _this.nbiots = {
                                        businesscount: 0,
                                        usercount: 0,
                                        active_user_nums: 0,
                                        sum_throughputcount: 0,
                                        upward_flowcount: 0,
                                        downward_flowcount: 0,
                                    }
                                }
                            }
                        }
                    }
                })
                .catch(function (error) {
                    //请求失败
                    console.log(error);
                });
            _this.sendDataList();
        },
        // 页面切换
        handleClick(tab, event) {
            if (this.activeName == "whole") {
                this.situationtitle = "全网";
                this.touchTest = !this.touchTest;
                this.sendDataList();
            } else if (this.activeName == "situation_2G") {
                this.situationtitle = "2G";
                this.touchTest = !this.touchTest;
                this.sendDataList();
            } else if (this.activeName == "situation_4G") {
                this.situationtitle = "4G";
                this.touchTest = !this.touchTest;
                this.sendDataList();
            } else {
                this.situationtitle = "NB-IOT";
                this.touchTest = !this.touchTest;
                this.sendDataList();
            }
        },
    },
};